<template>
  <div>
    <div class="match-performance-items">
      <div
        @click="clickPerformance(item)"
        v-for="(item, index) in performance"
        :key="index"
        class="performanceClass"
        :class="{ active: activePerformance === item }"
      >
        {{ item }}
      </div>
    </div>
    <Organize :playerId="playerId" v-show="activePerformance === '组织'" />
    <Shoot :playerId="playerId" v-show="activePerformance === '射门'" />
    <Defense :playerId="playerId" v-show="activePerformance === '防守'" />
    <Skill :playerId="playerId" v-show="activePerformance === '技术'" />
  </div>
</template>

<script>
import Organize from "./organize/Organize";
import Shoot from "./shoot/Shoot";
import Defense from "./defense/Defense";
import Skill from "./skill/Skill";
export default {
  name: "MatchPerformance",
  props: {
    playerId: {
      type: Number,
    },
    season: {
      type: String,
      default() {
        return "2019赛季";
      },
    },
  },
  components: {
    Organize,
    Shoot,
    Defense,
    Skill,
  },
  data() {
    return {
      // activePane:'ThroughPass',
      activePerformance: "组织",
      performance: ["组织", "射门", "防守", "技术"],
    };
  },
  methods: {
    //点击 '组织','射门','防守','技术' 切换
    clickPerformance(item) {
      this.activePerformance = item;
    },
  },
};
</script>

<style scoped>
.match-performance-items {
  display: flex;
  justify-content: flex-start;
  width: 1440px;
  height: 56px;
  margin: 40px auto 0;
  /*background-color: red;*/
}
.performanceClass {
  color: white;
  line-height: 56px;
  font-size: 30px;
  font-weight: bold;
  letter-spacing: 5px;
  text-align: center;
  width: 132px;
  height: 100%;
  background-color: #9e9e9e;
  border-radius: 10px 10px 0 0;
  margin-right: 3px;
}
.performanceClass:hover {
  color: #16c79a;
  background-color: #194568;
  cursor: pointer;
}
.active {
  color: #16c79a;
  background-color: #194568;
}
</style>
